<template>
	<view class="home">
		<view class="weather">
			<view class="weather_icons">
				<view class="tubiao">
					<view class="tub">
						<text :class="icon"></text>
					</view>
					<view class="tex">
						体感温度：{{tianqi.feelsLike}}°
					</view>
				</view>
				<view class="text">
					<view class="a">
						{{tianqi.temp}}°
					</view>
					<view class="b">
						{{tianqi.text}}
					</view>
				</view>
			</view>
			<view class="weather_text">
				<view class="item">
					<view class="text_a">
						{{tianqi.pressure}}hPa
					</view>
					<view class="text_b">
						大气压
					</view>
				</view>
				<view class="" style="width: 1rpx;height: 40rpx;background-color: #ffffff;"></view>
				<view class="item">
					<view class="text_a">
						{{tianqi.vis}}km
					</view>
					<view class="text_b">
						能见度
					</view>
				</view>
				<view class="" style="width: 1rpx;height: 40rpx;background-color: #ffffff;"></view>
				<view class="item">
					<view class="text_a">
						{{tianqi.humidity}}%
					</view>
					<view class="text_b">
						相对湿度
					</view>
				</view>
			</view>
			<view class="day">
				更新时间 {{tianqi.time}}
			</view>
		</view>
		<view class="windspeed">
			<view class="item">
				<view class="text_a">
					{{tianqi.windSpeed}}km/h
				</view>
				<view class="text_b">
					风速
				</view>
			</view>
			<view class="" style="width: 1rpx;height: 40rpx;background-color: #55557f;"></view>
			<view class="item">
				<view class="text_a">
					{{tianqi.wind360}}°
				</view>
				<view class="text_b">
					风向
				</view>
			</view>
			<view class="" style="width: 1rpx;height: 40rpx;background-color: #55557f;"></view>
			<view class="item">
				<view class="text_a">
					{{tianqi.windScale}} 级
				</view>
				<view class="text_b">
					{{tianqi.windDir}}
				</view>
			</view>
		</view>
		<u-tabs :list="list" :scrollable="false" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
			lineColor="#3268dd" @click="clickTabs">
		</u-tabs>
		<view class="status_box" v-show="uchartsIF">
			<view class="realtime" hover-class="realtimeACT" @click="realtimeFN">
				点击查看实时数据
			</view>
			<view class="dev_status">
				<view class="">
					设备IMEI：
				</view>
				<view class="danwei">
					{{thingsModelValue.imei}}
				</view>

			</view>
			<view class="dev_status">
				<view class="">
					分钟雨量：
				</view>
				<view class="danwei">
					{{thingsModelValue.mr}} 毫米
				</view>
			</view>
			<view class="dev_status">
				<view class="">
					小时雨量：
				</view>
				<view class="danwei">
					{{thingsModelValue.hr}} 毫米
				</view>
			</view>
			<view class="dev_status">
				<view class="">
					最大雨强：
				</view>
				<view class="danwei">
					{{thingsModelValue.hs}} 毫米
				</view>
			</view>
			<view class="dev_status">
				<view class="">
					今日雨量：
				</view>
				<view class="danwei">
					{{thingsModelValue.tr}} 毫米
				</view>
			</view>
			<view class="dev_status">
				<view class="">
					24h雨量：
				</view>
				<view class="danwei">
					{{thingsModelValue.h24r}} 毫米
				</view>
			</view>
			<view class="dev_status">
				<view class="">
					昨日雨量：
				</view>
				<view class="danwei">
					{{thingsModelValue.yr}} 毫米
				</view>
			</view>
		</view>
		<yuLiangZhan ref="myYLZ" :listYLZ="obYLZ" v-show="!uchartsIF"></yuLiangZhan>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js';
	import yuLiangZhan from '@/components/yuLiangZhan.vue';
	export default {
		components: {
			yuLiangZhan
		},
		data() {
			return {
				uchartsIF: true,
				obYLZ: [],
				tianqi: {},
				icon: 'qi-100',
				activeStyle: {
					color: '#3268dd'
				},
				inactiveStyle: {
					color: '#939393'
				},
				list: [{
					name: '今日',
				}, {
					name: '7天',
				}, {
					name: '15天'
				}, {
					name: '30天'
				}],
				deviceName: '',
				productKey: '',
				beginReportingTime: '',
				endReportingTime: '',
				thingsModelValue: {},
				optionid:null
			}
		},
		onLoad(option) {
			this.optionid = option.id
			this.devshowFn(option.id)
		},
		methods: {
			realtimeFN(){
				uni.navigateTo({
					url: '/pages/home/measureFun/yuLiangJi/realtime?id=' + this.optionid
				});
			},
			// 天气
			weatherFn(e) {
				let key = '569de1237a82445cabd591293f21badd'
				uni.request({
					url: 'https://devapi.qweather.com/v7/weather/now',
					data: {
						location: e,
						key: key
					},
					success: (res) => {
						this.tianqi = res.data.now
						this.tianqi.time = dayjs(res.data.now.obsTime).format('YYYY-MM-DD HH:mm:ss')
						this.icon = 'qi-' + res.data.now.icon
					}
				});

			},
			clickTabs(item) {
				if (item.name == '今日') {
					this.uchartsIF = true
				} else {
					this.uchartsIF = false
				}
				this.days(item.index)
			},
			// 图表时间
			days(index) {
				let now = dayjs();
				// 今日时间
				let todayStart = now.subtract(0, 'hour').format('YYYY-MM-DD ') + '00:00:00'
				let todayEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 7天
				let threeStart = now.subtract(6, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let threeEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 15天
				let fifteenStart = now.subtract(14, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let fifteenEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 30天
				let sixtyStart = now.subtract(29, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let sixtyEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				if (index == 0) {
					this.beginReportingTime = todayStart
					this.endReportingTime = todayEnd
					this.deviceNex()
				}
				if (index == 1) {
					this.beginReportingTime = threeStart
					this.endReportingTime = threeEnd
					this.deviceNex()
				}
				if (index == 2) {
					this.beginReportingTime = fifteenStart
					this.endReportingTime = fifteenEnd
					this.deviceNex()
				}
				if (index == 3) {
					this.beginReportingTime = sixtyStart
					this.endReportingTime = sixtyEnd
					this.deviceNex()
				}
			},
			// 图表数据
			deviceNex() {
				uni.$u.http.get('/device/device_reported_data/selectModelReportData', {
					params: {
						"tabPosition": 1,
						"identifier": 'YR',
						"deviceName": this.deviceName,
						"productKey": this.productKey,
						"beginReportingTime": this.beginReportingTime,
						"endReportingTime": this.endReportingTime,
					}
				}).then(res => {
					if (res.code == 200) {
						this.obYLZ = res.data
						setTimeout(() => {
							this.$refs.myYLZ.onloshow()
						}, 500)

					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
						// uni.reLaunch({
						// 	url: '/pages/home/login'
						// });
					}
				}).catch(err => {
					console.log('错误', err);
					uni.showToast({
						title: '网络错误',
						duration: 1500
					})
				})
			},
			// 设备详情
			devshowFn(e) {
				console.log('e',e);
				uni.$u.http.get('/device/device/getInfoPhone/' + e).then(res => {
					console.log('res',res);
					if (res.code == 200) {
						let arr = JSON.parse(res.data.deviceReportedData.logValue)
						let obj = {}
						for (let i = 0; i < arr.length; i++) {
							if (arr[i].identifier == 'IMEI') {
								obj.imei = arr[i].value
							}
							if (arr[i].identifier == 'LON') {
								obj.lon = arr[i].value
							}
							if (arr[i].identifier == 'LAT') {
								obj.lat = arr[i].value
							}
							if (arr[i].identifier == 'IM') {
								obj.im = arr[i].value
							}
							if (arr[i].identifier == 'MR') {
								obj.mr = arr[i].value
							}
							if (arr[i].identifier == 'HR') {
								obj.hr = arr[i].value
							}
							if (arr[i].identifier == 'HS') {
								obj.hs = arr[i].value
							}
							if (arr[i].identifier == 'TR') {
								obj.tr = arr[i].value
							}
							if (arr[i].identifier == 'H24R') {
								obj.h24r = arr[i].value
							}
							if (arr[i].identifier == 'YR') {
								obj.yr = arr[i].value
							}
						}
						let lonlat = (obj.lon * 1).toFixed(2) + ',' + (obj.lat * 1).toFixed(2)
						this.thingsModelValue = obj
						this.deviceName = res.data.deviceName
						this.productKey = res.data.productKey
						this.weatherFn(lonlat)
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
						// uni.reLaunch({
						// 	url: '/pages/home/login'
						// });
					}
				}).catch(err => {
					console.log('err', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			}

		},
		onResize() {
			// 横屏竖屏
			uni.getSystemInfo({
				success: (res) => {
					if (res.windowWidth > res.windowHeight) {
						console.log('横屏');
						setTimeout(() => {
							this.$refs.myYLZ.onloshow()
						}, 100)
					} else {
						console.log('竖屏');
						setTimeout(() => {
							this.$refs.myYLZ.onloshow()
						}, 100)
					}
				}
			});
		},
	}
</script>
<style scoped lang="scss">
	.home {
		padding: 0 40rpx;

		.weather {
			width: 480rpx;
			// height: 380rpx;
			margin: 20rpx auto;
			padding: 20rpx;
			border-radius: 50rpx;
			background-color: #196bed;

			.weather_icons {
				display: flex;
				align-items: center;
				justify-content: center;
				// background-color: #8cc6ff;

				.tubiao {
					color: #ffffff;
					text-align: center;

					.tub {
						font-size: 120rpx;
					}

					.tex {
						font-size: 30rpx;
					}
				}

				.text {
					text-align: center;
					color: #ffffff;
					margin-left: 50rpx;

					.a {
						font-size: 80rpx;
					}

					.b {
						font-size: 50rpx;
					}
				}
			}

			.weather_text {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-radius: 30rpx;
				padding: 30rpx 0;
				background-color: rgba(0, 0, 0, 0.1);

				.item {

					text-align: center;
					color: #ffffff;

					.text_a {
						font-size: 35rpx;
					}

					.text_b {
						font-size: 25rpx;
					}
				}
			}
		}

		.day {
			margin: 0 auto;
			// background-color: #5e97ed;
			text-align: center;
			border-radius: 20rpx;
			padding: 10rpx 0;
			font-size: 30rpx;
			color: #ffffff;
		}

		.windspeed {
			// width: 600rpx;
			// height: 150rpx;
			padding: 20rpx;
			margin: 0rpx auto;
			border-radius: 50rpx;
			background-color: #eff7fe;
			// background-color: #fdd15a;
			display: flex;
			align-items: center;
			justify-content: space-around;

			// box-shadow: 0rpx 0rpx 30rpx #8eaac2;
			.item {

				text-align: center;
				color: #0f1a64;

				.text_a {
					font-size: 35rpx;
				}

				.text_b {
					font-size: 30rpx;
				}
			}
		}

		.status_box {
			padding: 0 40rpx 40rpx 40rpx;
			border-radius: 20rpx;
			// background-color: rgba(0, 0, 0, 0.1);

			.dev_status {
				font-size: 40rpx;
				color: #151515;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #d8e1e5;
				display: flex;
				align-items: center;
				justify-content: space-between;

			}
		}

	}

	.danwei {
		margin-left: 20rpx;
		font-size: 35rpx;
		color: #686868;
	}

	.realtime {
		padding: 10rpx;
		background-color: #55557f;
		font-size: 30rpx;
		color: #ffffff;
		border-radius: 100rpx;
		margin-top: 20rpx;
		text-align: center;
	}
	.realtimeACT {
		background-color: #7b7bb8;
	}
</style>
<style>
	/* 引入字体图标 */
	@import url("/static/fonts/icons/qweather-icons.css");
</style>
<style>
	page {
		background-color: #ffffff;
	}
</style>